<template>
  <div class="order-page">
      <div class="order-head">
           <img  class="back" src="../../assets/perfromImg/jiantou.png" alt="" @click="returnPage">
           <div class="title">我的订单</div>
      </div>
       <div class="order-tab">
           <div class="tab">
               <div class="left" @click="showPickers">
                    <!-- <van-field readonly clickable name="picker" :value="className" placeholder="" @click="showClassPicker = true"/> -->
                    <span>{{className}}</span>
                    <img src="../../assets/perfromImg/xl.png" alt="">
              </div>
                <div class="right" @click="showTeam">
                    <span>{{teamName}}</span>
                    <img src="../../assets/perfromImg/xl.png" alt="">
                </div>
           </div>
       </div>
       <div v-if="this.orderList.length==0" style="display:flex;justify-content:center;align-items:center;margin-top:0.3rem">暂无订单数据</div>
       <div  v-for="(item,index) in orderList" :key="index" @click="toDetail(item)" >
          <div class="order-list"  v-if="item.status==status||item.user_id==user_id"> 
           <div class="list-head">
               <div class="head-left">订单号:{{item.orderno}}</div>
               <div class="head-right">状态:{{item.status}}</div>
           </div>
           <div class="list-bottom">
               <div class="list-left">
                   <img src="../../assets/perfromImg/312.jpg"   v-if="item.type=='停息'"  alt="">
                   <img src="../../assets/perfromImg/313.jpg"   v-if="item.type=='征信'"  alt="">
                   <img src="../../assets/perfromImg/314.jpg"   v-if="item.type=='网贷'"  alt="">
               </div>
               <div class="list-right">
                   <div class="title">
                       <span class="goods-name" v-html="item.msg"></span>
                   </div>
                   <!-- <div class="recommond">推荐人:{{listItem.tj}}</div> -->
                   <div class="sponsor">发起人:{{item.username}}</div>
                   <div class="price">
                       <div class="money">
                           <span class="fuhao">￥</span>
                           <span class="money">{{item.money}}</span>
                       </div>
                       <div class="time">{{item.createTime}}</div>
                   </div>
               </div>
           </div>
           </div>
       </div>
       <van-popup v-model="showClassPicker" position="bottom">
          <van-picker show-toolbar :columns="order_status" @confirm="onClassConfirm" @cancel="showClassPicker = false"/>
        </van-popup>
       <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="teamList"  value-key='nickname' @confirm="onTeamConfirm" @cancel="showPicker = false"/>
        </van-popup>

  </div>

</template>

<script>
import { Picker } from 'vant'
import {goodsListData,teamListData} from "../../sever/request"
import {UserData} from "../../sever/team"
export default {
     components: {
        vanPicker: Picker,
    },
    data() {
        return {
            orderList:[],
            shop_id:131,
            token:'a17c4cc5-70ea-485d-94ca-bcae35a02cc9',
            order_status: [{
                    text: '全部',
                    loadingType: 'more',
                    page_num: 1,
                },
                {
                    text: '待付款',
                    loadingType: 'more',
                    page_num: 1,
                },
                {
                    text: '已支付',
                    loadingType: 'more',
                    page_num: 1,
                },
                {
                    text: '待签收',
                    loadingType: 'more',
                    page_num: 1,
                },
                {
                    text: '已完成',
                    loadingType: 'more',
                    page_num: 1,
                }
            ],
            teamList:[],
            className:'全部',
            teamName:'请选择',
            showClassPicker:false,
            showPicker:false,
            number:'',
            status:'',
            user_id:'',
           
        }
    },
    created() {
        let store = this.$route.query;
        if (store.shop_id != undefined) {
        this.shop_id = store.shop_id;
        }
        if (store.token != "" && store.token != undefined) {
        this.token = store.token;
        }
        this.getTeamData()
        this.getData()
    },

    methods: {
        getTeamData(){
                teamListData({
                  token: this.token,
                  shop_id:this.shop_id,
              }).then((res)=>{
                  console.log(res)
                  if(res.data.code==1){
                      this.teamList=res.data.data
                  }
              })
        },


       

         //返回上一页
			returnPage() {
				uni.navigateBack({
					delta: 1
				});
			},

        getData(){
             UserData({
              token: this.token,
           }).then((res)=>{
               let user_id=''
                 if(res.data.code==1){
                     user_id=res.data.data.id
                     goodsListData({
                        token: this.token,
                        shop_id:this.shop_id,
                        user_id:user_id,
                        status:this.status
                    }).then((res)=>{
                        if(res.data.code==1){
                            this.orderList=res.data.data
                        }
                    })
                 }
           }) 
              
        },
        onClassConfirm(v){
              this.status=v.text
              this.className = v.text;
              this.showClassPicker = false;
        },
        showPickers(){
             this.showClassPicker=true
        },
        showTeam(){
             this.showPicker=true
        },
        onTeamConfirm(v){
              this.user_id=v.id
              this.teamName = v.nickname;
              this.showPicker = false;
              this.getData(v.id);
        },



        //打开详细信息
			toDetail(item) {
				if (item.type == '停息') {
					uni.navigateTo({
						url: "/pages/fumao/plan?id=" + item.id+"&shop_id="+this.shop_id
					})
				} else if (item.type == '征信') {
					uni.navigateTo({
						url: "/pages/fumao/plan_zhenxing?id=" + item.id+"&shop_id="+this.shop_id
					})
				} else if (item.type == '网贷') {
					uni.showToast({
						title: "项目经理正在打通渠道",
						icon: "none"
					})
				}
			},
    },
}
</script>
<style lang="less" scoped>
 .order-page{
      width: 10rem;
     .order-head{
           width: 10rem;
           height: 1.906667rem;
           background: linear-gradient(24deg, #37A8FC 0%, #297EF6 100%);
           display: flex;
           justify-content:flex-start;
           align-items: center;
           .back{
               width: .24rem;
               height: .426667rem;
               margin-left: .266667rem;
               margin-top: .4rem;
           }
           .title{
               font-size: .44rem;
               color: #FFFFFF;
               margin-top: .4rem;
               margin-left: 4.133333rem;
           }
     }

     .order-tab{
         width: 10rem;
         height: 1.44rem;
         background: #FFFFFF;
         display: flex;
         justify-content: center;
         align-items: center;
         .tab{
             display: flex;
             justify-content: flex-start;
             align-items: center;
             .left,.right{
                 display: flex;
                 justify-content: flex-start;
                 align-items: center;
                 span{
                     font-size: .333333rem;
                     color: #000;
                 }
                 img{
                     width: .266667rem;
                     height: .266667rem;
                     margin-left: .106667rem;
                 }
             }
              .left{
                 margin-right: 1.6rem;
             }
             .right{
                 margin-left: 1.6rem;
             }
         }
     }

     .order-list{
         width: 10rem;
        height: 4.013333rem;
        background: #FFFFFF;
        margin-top: .266667rem;
        .list-head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: .933333rem;
            border-bottom: 1px solid #E6E6E6;
            .head-left{
                font-size: .28rem;
                color: #999;
                margin-left: .266667rem;
            }
            .head-right{
                font-size: .28rem;
                color: #999;
                margin-right: .266667rem;
            }
        }
        .list-bottom{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 9.466667rem;
            margin: .266667rem auto;
            .list-left{
                   width: 2.133333rem;
                    height: 2.133333rem;
                img{
                    width: 2.133333rem;
                    height: 2.133333rem;
                }
            }
            .list-right{
                width:7.6rem;
                margin-left: .4rem;
                .title{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .goods-name{
                        width: 6.933333rem;
                        display: inline-block;
                        // overflow: hidden; /*超出部分隐藏*/
                        // white-space: nowrap; /*不换行*/
                        // text-overflow: ellipsis; /*超出部分文字以...显示*/
                        font-size: .373333rem;
                        color: #000;
                    }
                    .goods-zt{
                        width: 1.333333rem;
                        height: .4rem;
                        display: inline-block;
                        text-align: center;
                        font-size: .28rem;
                        color: #CC3333;
                        line-height: .4rem;
                        border: 1px solid #CC3333;
                    }
                }
                .recommond{
                    font-size: .28rem;
                    color: #999;
                    margin-top: .133333rem;
                }
                .sponsor{
                     font-size: .28rem;
                     color: #999;
                     margin-top: .133333rem;
                }
                .price{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: .466667rem;
                    .money{
                        .fuhao{
                            font-size: .32rem;
                            color: #CC3333;
                        }
                        .money{
                            font-size: .44rem;
                            color: #CC3333;
                        }
                    }
                    .time{
                        font-size: .32rem;
                        color: #999;
                    }
                }
            }
        }
     }
 }
</style>